<template>
    <!--待办事项，客户详情页面-->
    <div>
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 140px">
            <el-form v-model="clientlist" :label-position="labelPosition" >
                <div>
                    <el-row :gutter="20" style="height:41px">
                        <el-col :span="6" >
                            <el-form-item>
                                <i class="el-icon-s-custom" style="margin-left: 10px; font-size: 19px;"></i>
                                <span style="font-weight: bold;font-size: 18px;margin-left: 10px">{{clientlist.clientName}}</span>
                                <span style="display: none">id:{{clientlist.clientId}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="12">
                            <el-form-item>
                                <el-button class="el-icon-edit" style="margin-left: 100px;"
                                           @click="xgclient(clientlist.clientId)">编辑</el-button>
                                <el-button class="el-icon-back" @click="gotoMenufh">返回</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <!--下-->
                <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                    <div style="height: 150px;margin-left: 10px;">
                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                            <el-col :span="2">
                                <span style="color: gray">客户级别：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{clientlist.clientRank}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">手机：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: black">{{clientlist.clientMobile}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                            <el-col :span="2">
                                <span style="color: gray">负责人：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{clientlist.empId.empName}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">更新时间：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: black">{{clientlist.updateTime | formatDate}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                        </el-row>
                    </div>
                </div>
            </el-form>
        </div>
        <!--进度详情-->
        <div style="margin-top: 5px;border: 1px solid #BFBFBF;background-color: white;">
            <div>
                <template>
                    <el-tabs type="card" v-model="activeName2">
                        <el-tab-pane label="全部" style="min-height: 400px;" name="first">
                            <div style="margin-left: 110px;">
                                <div style="min-height: 400px;margin-top: 20px;width: 970px;">
                                    <div style="margin-top: 10px;min-height: 400px;">
                                        <el-timeline>
                                            <el-timeline-item v-for="(item,i) in selectall" :key="i"
                                                              :timestamp="item.cxtime | formatDate" placement="top">
                                                <el-card style="height: 165px; margin-bottom: 10px;">
                                                    <img src="../assets/strat1.png" style="width: 35px;height: 35px; margin-top: 5px;">
                                                    <span style="margin-left: 15px;color: #337AB7; font-size: 17px;">{{item.cxname}}</span>
                                                    <span style="margin-top: -10px;margin-left: 25px; color: #A0A0A0">
                                                        负责人：<a class="el-icon-user"></a>{{item.cxfzr}}</span>
                                                    <div style="margin-top: 15px;margin-left: 49px;cursor:pointer;" @click="cxid(item.cxid,item.cxname)">
                                                        主题：{{item.cxnr}}
                                                    </div>
                                                    <p style="margin-top: 15px;margin-left: 49px;color: #BFBFBF">创建时间：{{item.cxtime | formatDate}}</p>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="基本信息" name="second" style="height: 410px;">
                            <div class="shugan" style="margin-left: 20px;"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <el-form v-model="clientlist" style="margin-left: 20px;" :label-position="labelPosition" >
                                <div>
                                    <div style="height: 150px;margin-left: 10px;">
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">客户名称：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientName}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">客户级别：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.clientRank}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="2">
                                                <span style="color: gray">手机：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientMobile}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">创建人：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.empId.empName}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">负责人：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.empId.empName}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">创建时间：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.establishTime | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">客户行业：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientIndustry}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">客户来源：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.clientSource}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">网址：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientUrl}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">更新时间：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.updateTime | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">电话：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientPhone}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">地址：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{clientlist.clientSite}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">备注：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{clientlist.clientRemark}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                        </el-row>
                                    </div>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="联系人" name="third" style="height: 410px;">
                            <div>
                                <el-form v-model="clientlist">
                                <div style="width: 970px;margin: 10px 70px">
                                    <div>
                                        <el-button style="margin-left: 950px" size="small" type="primary" @click="xjlxr(clientlist.clientId)">新建联系人</el-button>
                                    </div>
                                </div>
                                <div style="width: 970px;margin: 10px 150px">
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                                  style="width: 100%;" :data="linkmanlist">
                                            <el-table-column prop="linkmanName" fixed label="姓名" sortable
                                                    align="center" width="310">
                                            </el-table-column>
                                            <el-table-column prop="linkmanMobile" label="手机"
                                                    align="center" width="250">
                                            </el-table-column>
                                            <el-table-column prop="linkmanPosition" label="职务"
                                                    align="center" width="200">
                                            </el-table-column>
                                            <el-table-column prop="empId.empName" label="负责人"
                                                    align="center" width="210">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                                </el-form>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="联系提醒" name="lxtx">
                                <div>
                                    <div style="width: 970px;margin: 5px 70px">
                                        <div>
                                            <el-button style="margin-left: 990px" size="small" type="primary" @click="lxtxann">新建联系提醒</el-button>
                                        </div>
                                        <el-dialog style="width: 1400px;margin: 0 auto;" title="新建联系提醒" :visible.sync="lxtxtankuan">
                                            <div class="shugan"></div>
                                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                                            <br/>
                                            <el-form :model="lxtxList" style="margin-top:10px;margin-left: 20px;" size="mini">
                                                <el-row>
                                                    <el-form-item style="display:none" prop="clientId"><!--客户id-->
                                                        <el-input v-model="clientlist.clientId" style="display:none"></el-input>
                                                    </el-form-item>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="empId">
                                                            <label slot="label" style="font-size: 13px">负责人:</label>
                                                            <el-input :disabled="true" v-model="lxtxList.empId.empName"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="9">
                                                        <el-form-item style="width:200px" prop="relationwarnZt">
                                                            <label slot="label" style="font-size: 13px">状态:</label><br/>
                                                                <el-radio v-model="lxtxList.relationwarnZt" label="0">新增</el-radio>
                                                                <el-radio v-model="lxtxList.relationwarnZt" label="1">完成</el-radio>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="relationwarnTime">
                                                            <label slot="label" style="font-size: 13px">联系时间:</label>
                                                            <el-date-picker v-model="lxtxList.relationwarnTime" align="right" type="datetime"
                                                                    style="width: 250px" placeholder="选择日期"
                                                                    :picker-options="pickerOptions">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="9">
                                                        <el-form-item style="width:200px" prop="relationwarnLx">
                                                            <label slot="label" style="font-size: 13px">联系类型:</label>
                                                            <el-select v-model="lxtxList.relationwarnLx" placeholder="请选择" style="width:250px;">
                                                                <el-option v-for="item in lxlx" :key="item.valuelx"
                                                                           :label="item.label" :value="item.valuelx">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="linkmanId">
                                                            <label slot="label" style="font-size: 13px">客户联系人:</label>
                                                            <el-select v-model="lxtxList.linkmanId" value-key="linkmanId" placeholder="请选择" style="width:250px;">
                                                                <el-option v-for="item in khlxr" :key="item.linkmanId"
                                                                           :label="item.linkmanName" :value="item">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item style="width:250px;" prop="relationwarnNr">
                                                            <label style="font-size: 13px">内容:</label>
                                                            <textarea placeholder="请填写本次联系计划目标内容"
                                                                      v-model="lxtxList.relationwarnNr" style="width: 595px; height: 70px;"></textarea>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                            </el-form>
                                            <div slot="footer" style="text-align: center" class="dialog-footer">
                                                <el-button @click="lxtxtankuan = false">取 消</el-button>
                                                <el-button type="primary" @click="addlxtx">确 定</el-button>
                                            </div>
                                        </el-dialog>

                                        <el-dialog style="width: 1400px;margin: 0 auto;" title="编辑联系提醒" :visible.sync="xglxtxtankuan">
                                            <div class="shugan"></div>
                                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                                            <br/>
                                            <el-form :model="lxtxList" style="margin-top:10px;margin-left: 20px;" size="mini">
                                                <el-row>
                                                    <el-form-item style="display:none" prop="clientId"><!--客户id-->
                                                        <el-input v-model="clientlist.clientId" style="display:none"></el-input>
                                                    </el-form-item>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="clientName">
                                                            <label slot="label" style="font-size: 13px">客户名称:</label>
                                                            <el-input :disabled="true" v-model="lxtxList.clientId.clientName"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="9">
                                                        <el-form-item style="width:250px;" prop="empId">
                                                            <label slot="label" style="font-size: 13px">负责人:</label>
                                                            <el-input :disabled="true" v-model="lxtxList.empId.empName"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="relationwarnTime">
                                                            <label slot="label" style="font-size: 13px">联系时间:</label>
                                                            <el-date-picker v-model="lxtxList.relationwarnTime" align="right" type="datetime"
                                                                            style="width: 250px" placeholder="选择日期"
                                                                            :picker-options="pickerOptions">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="9">
                                                        <el-form-item style="width:200px" prop="relationwarnLx">
                                                            <label slot="label" style="font-size: 13px">联系类型:</label>
                                                            <el-select v-model="lxtxList.relationwarnLx" placeholder="请选择" style="width:250px;">
                                                                <el-option v-for="item in lxlx" :key="item.valuelx"
                                                                           :label="item.label" :value="item.valuelx">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="13">
                                                        <el-form-item style="width:250px;" prop="linkmanId">
                                                            <label slot="label" style="font-size: 13px">客户联系人:</label>
                                                            <el-select v-model="lxtxList.linkmanId" value-key="linkmanId" placeholder="请选择" style="width:250px;">
                                                                <el-option v-for="item in khlxr" :key="item.linkmanId"
                                                                           :label="item.linkmanName" :value="item">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item style="width:250px;" prop="relationwarnNr">
                                                            <label style="font-size: 13px">内容:</label>
                                                            <textarea placeholder="请填写本次联系计划目标内容"
                                                                      v-model="lxtxList.relationwarnNr" style="width: 595px; height: 70px;"></textarea>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                            </el-form>
                                            <div slot="footer" style="text-align: center" class="dialog-footer">
                                                <el-button @click="xglxtxtankuan = false">取 消</el-button>
                                                <el-button type="success" @click="bjlxtxzt1" v-if="lxtxList.relationwarnZt==0">完 成 提 醒</el-button>
                                                <el-button type="success" @click="bjwlxtxzt2" v-if="lxtxList.relationwarnZt==1">重 新 标 记</el-button>
                                                <el-button type="primary" @click="bjlxtx">保 存</el-button>
                                            </div>
                                        </el-dialog>
                                    </div>
                                        <el-collapse v-model="activeNames" style="width:1100px; margin-left: 80px;" @change="handleChange">
                                            <el-collapse-item v-if="this.lxtxLists[0]!=null" class="lx" title="正在进行中 >" name="1">
                                                <div class="divs" v-for="(item, i) in lxtxLists" :key="item.relationwarnId">
                                                    <el-col :span="13">
                                                        <span style="margin-left: 30px;" @click="lxtxann2(item)">{{i+1}}、 联系【{{item.linkmanId.linkmanName}}】</span>
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <span>{{item.empId.empName}}</span>
                                                    </el-col>
                                                    <el-col :span="5" class="ysclass">
                                                        <span>{{item.relationwarnTime | formatDate}}</span>
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <div style="margin-top:-5px;">
                                                            <el-button type="text" @click="bjlxtxzt(item)" v-if="item.relationwarnZt==0">标记完成</el-button>
                                                            <el-button type="text" @click="bjwlxtxzt(item)" v-if="item.relationwarnZt==1">重新标记</el-button>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="2"><span style="margin-left: 25px;" @click="sclxtx(item)">删除</span></el-col>
                                                </div>
                                            </el-collapse-item>

                                            <el-collapse-item v-if="this.lxtxListser[0]!=null" class="lx2" title="已完成 >" name="2">
                                                <div class="divs1" v-for="(items,i) in lxtxListser" :key="items.relationwarnId">
                                                    <el-col :span="13">
                                                            <!--                                                <template slot-scope="sp">v-html="sp.row.clientName" @click="todetails(sp.row)"-->
                                                        <span style="margin-left: 30px;" @click="lxtxann2(items)">{{i+1}}、 联系【{{items.linkmanId.linkmanName}}】</span>
                                                            <!--                                                </template>-->
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <span>{{items.empId.empName}}</span>
                                                    </el-col>
                                                    <el-col :span="5" class="ysclass">
                                                        <span>{{items.relationwarnTime | formatDate}}</span>
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <div style="margin-top:-5px;">
                                                            <el-button type="text" @click="bjlxtxzt(items)" v-if="items.relationwarnZt==0">标记完成</el-button>
                                                            <el-button type="text" @click="bjwlxtxzt(items)" v-if="items.relationwarnZt==1">重新标记</el-button>
                                                        </div>
                                                    </el-col>
                                                    <p>
                                                        <el-col :span="2"><span style="margin-left: 25px;" @click="sclxtx(items)">删除</span></el-col>
                                                    </p>
                                                </div>
                                            </el-collapse-item>

                                            <el-collapse-item v-if="this.lxtxListssan[0]!=null" class="lx3" title="已延期 >" name="3">
                                                <div class="divs2" v-for="(itemsss,i) in lxtxListssan" :key="itemsss.relationwarnId">
                                                    <el-col :span="13">
                                                            <!--                                                <template slot-scope="sp">v-html="sp.row.clientName" @click="todetails(sp.row)"-->
                                                        <span style="margin-left: 30px;" @click="lxtxann2(itemsss)">{{i+1}}、 联系【{{itemsss.linkmanId.linkmanName}}】</span>
                                                            <!--                                                </template>-->
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <span>{{itemsss.empId.empName}}</span>
                                                    </el-col>
                                                    <el-col :span="5" class="ysclass">
                                                        <span>{{itemsss.relationwarnTime | formatDate}}</span>
                                                    </el-col>
                                                    <el-col :span="2" class="ysclass">
                                                        <div style="margin-top:-5px;">
                                                            <el-button style="padding-top: -25px;" type="text" @click="bjlxtxzt(itemsss)" v-if="itemsss.relationwarnZt==0">标记完成</el-button>
                                                            <el-button type="text" @click="bjwlxtxzt(itemsss)" v-if="itemsss.relationwarnZt==1">重新标记</el-button>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="2"><span style="margin-left: 25px;" @click="sclxtx(itemsss)">删除</span></el-col>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    <div style="margin-top: 50px;" v-if="this.lxtxLists[0]==null & this.lxtxListser[0]==null & this.lxtxListssan[0]==null">
                                        <img data-v-009778d0="" src=""
                                             class="empty-icon">
                                        <div><p style="margin-top:90px;margin-left: 587px;color: gray;">没有找到数据</p></div>
                                    </div>
                                </div>
                        </el-tab-pane>
                        <el-tab-pane label="商机" name="five">
                            <div>
                                <div style="width: 970px;margin: 10px 150px">
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                                style="width: 100%" :data="sjlist">
                                            <el-table-column prop="busName" fixed label="商机名称" sortable
                                                             align="center" width="310">
                                            </el-table-column>
                                            <el-table-column prop="busMoney" label="商机金额"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="client.clientName" label="客户名称"
                                                             align="center" width="180">
                                            </el-table-column>
                                            <el-table-column prop="busPossibility" label="可能性"
                                                             align="center" width="180">
                                            </el-table-column>
                                            <el-table-column prop="busPeople" label="负责人"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="busStatu" label="状态"
                                                             align="center" width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="合同" name="six" style="height: 410px;">
                            <div>
                                <div style="width: 970px;margin: 10px 150px">
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table :data="htlists" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                                style="width: 100%">
                                            <el-table-column prop="conNo" fixed label="合同编号" sortable
                                                             align="center" width="210">
                                            </el-table-column>
                                            <el-table-column prop="conTheme" label="合同主题"
                                                             align="center" width="200">
                                            </el-table-column>
                                            <el-table-column prop="conTotal" label="合同总金额"
                                                             align="center" width="120">
                                            </el-table-column>
                                            <el-table-column prop="conTime" label="合同时间"
                                                             align="center" width="180">
                                                <template slot-scope="p">
                                                    {{p.row.conTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="conState" label="合同状态"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="conRemark" label="备注"
                                                             align="center" width="160">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="回款信息" name="seven" style="height: 410px;">
                            <div>
                                <div style="width: 970px;margin: 10px 150px">
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table :data="hkjhlists" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                                style="width: 100%">
                                            <el-table-column prop="clientId.clientName" label="客户名称"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyTheme" fixed label="计划主题" sortable
                                                             align="center" width="210">
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyIssue" fixed label="计划回款期次" sortable
                                                             align="center" width="140">
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyPayment" label="付款方式"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyTime" label="计划回款日期"
                                                             align="center" width="180">
                                                <template slot-scope="p">
                                                    {{p.row.returnedmoneyTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyOwner" label="所有者"
                                                             align="center" width="120">
                                            </el-table-column>
                                            <el-table-column prop="returnedmoneyRemark" label="备注"
                                                             align="center" width="120">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="附件" name="eight" style="height: 410px;">
                            <div>
                                <div style="width: 970px;margin: 10px 150px">
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                                                style="width: 100%">
                                            <el-table-column prop="proname" fixed label="产品名称" sortable
                                                             align="center" width="310">
                                            </el-table-column>
                                            <el-table-column prop="promodel" label="数量"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="proprice" label="已交付"
                                                             align="center" width="100">
                                            </el-table-column>
                                            <el-table-column prop="pronum" label="计划交付日期"
                                                             align="center" width="180">
                                            </el-table-column>
                                            <el-table-column prop="proutil" label="所有者"
                                                             align="center" width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="操作记录" name="nine" style="height: 410px;">
                            <div class="block">
                                <div class="radio" style="margin-left: 38px;">
                                    <el-radio-group v-model="reverse">
                                        <el-radio :label="true">倒序</el-radio>
                                        <el-radio :label="false">正序</el-radio>
                                    </el-radio-group>
                                </div>

                                <el-timeline :reverse="reverse" style="margin-top: 40px;">
                                    <el-timeline-item v-for="(item) in activities"
                                            :key="item.operationId" :timestamp="item.operationTime | formatDate">
                                        <el-col :span="3">
                                            操作人:
                                            <span style="color: #409EFF;margin-right: 30px;">{{item.empId.empName}}</span>
                                        </el-col>
                                        <el-col :span="3">
                                            {{item.operationContent}}
                                        </el-col>
                                        <el-col :span="2">
                                            <i class="el-icon-s-custom" style="margin-left: 15px; font-size: 15px;"></i>
                                            <span style="color: #409EFF;margin-left: 5px;">{{item.clientId.clientName}}</span>
                                        </el-col>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js';
    import Crypto  from '../router//secret.js'
    export default {
        name: "TfyParticularsPage",
        data() {
            return {
                selectall:[],
                value1: true,
                datavalue:'',//日期
                radio: '0',//单选框x
                lxtxtankuan:false,//弹框
                xglxtxtankuan:false,//修改弹框
                checked1:false,//多选框
                activeNames: ['1','2','3'],//联系提醒
                /*对齐方式*/
                labelPosition:'left',
                //联系类型
                lxlx: [{
                    valuelx: '打电话',
                    label: '打电话'
                }, {
                    valuelx: '发邮件',
                    label: '发邮件'
                }, {
                    valuelx: '发短信',
                    label: '发短信'
                }, {
                    valuelx: '见面拜访',
                    label: '见面拜访'
                }, {
                    valuelx: '汇报记录',
                    label: '汇报记录'
                }, {
                    valuelx: '会晤',
                    label: '会晤'
                }, {
                    valuelx: '活动',
                    label: '活动'
                }, {
                    valuelx: '商务宴会',
                    label: '商务宴会'
                }, {
                    valuelx: '其他',
                    label: '其他'
                }],
                valuelx: '',
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }]
                },
                /*是否显示记录值div*/
                jl:false,
                activeName2: 'first',
                //操作记录-时间线
                reverse: true,
                activities: [],//操作记录-时间线表单
                khlxr:[],//客户联系人
                clientId:'',
                /*保存传过来的row*/
                clientlist: {//客户表单
                    clientId:0,
                    clientName:'',//公司名称
                    clientIndustry:'',//公司行业
                    clientSource:'',//客户来源
                    clientPhone:'',//客户电话
                    clientMobile:'',//客户手机
                    clientUrl:'',//客户网址
                    clientRank:'',//客户级别
                    clientSite:'',//客户地址
                    establishPerson:'',//下次联系时间
                    clientRemark:'',//客户备注
                    linkmanId:{//联系人
                        linkmanId:0,
                        linkmanName:'',
                        linkmanMobile:'',
                        linkmanPosition:'',
                        linkmanPeople:'',
                    },
                    empId:{
                        empId:0,
                        empName:''
                    },
                    operationId:{//操作表
                        operationId:0,
                        operationContent:'',
                        operationTime:'',
                    },
                    relationwarnId:{//联系提醒表
                        relationwarnId:0,
                        relationwarnNr:'',
                        relationwarnLx:'',
                        relationwarnTime:'',
                        relationwarnZt:'0',
                        relationwarnJd:0,
                    }
                },
                lxtxList:{//联系提醒表
                    relationwarnId:0,
                    relationwarnNr:'',
                    relationwarnLx:'',
                    relationwarnTime:'',
                    relationwarnZt:'0',
                    relationwarnJd:0,
                    empId:{//员工表
                        empId:0,
                        empName:''
                    },
                    clientId: {//客户表单
                        clientId: 0,
                        clientName: '',//公司名称
                        clientIndustry: '',//公司行业
                        clientSource: '',//客户来源
                        clientPhone: '',//客户电话
                        clientMobile: '',//客户手机
                        clientUrl: '',//客户网址
                        clientRank: '',//客户级别
                        clientSite: '',//客户地址
                        establishPerson: '',//下次联系时间
                        clientRemark: '',//客户备注
                    },
                    linkmanId: {//联系人
                        linkmanId: 0,
                        linkmanName: '',
                        linkmanMobile: '',
                        linkmanPosition: '',
                        linkmanPeople: '',
                    },
                    clueId:{
                        clueId:0,
                        clueName:'',
                        clueSource:'',
                        cluePhone:'',
                        clueMobile:'',
                        clueSite:'',
                        clueEstablishtime:'',
                        clueRemark:'',
                        clueLinkmanname:'',
                        clueLinkmansj:'',
                        clueSz:'',
                    }
                },
                lxtxLists:{//联系提醒表2
                    relationwarnId:0,
                    relationwarnNr:'',
                    relationwarnLx:'',
                    relationwarnTime:'',
                    relationwarnZt:'0',
                    relationwarnJd:0,
                    empId:{//员工表
                        empId:0,
                        empName:''
                    },
                    clientId: {//客户表单
                        clientId: 0,
                        clientName: '',//公司名称
                        clientIndustry: '',//公司行业
                        clientSource: '',//客户来源
                        clientPhone: '',//客户电话
                        clientMobile: '',//客户手机
                        clientUrl: '',//客户网址
                        clientRank: '',//客户级别
                        clientSite: '',//客户地址
                        establishPerson: '',//下次联系时间
                        clientRemark: '',//客户备注
                    },
                    linkmanId: {//联系人
                        linkmanId: 0,
                        linkmanName: '',
                        linkmanMobile: '',
                        linkmanPosition: '',
                        linkmanPeople: '',
                    },
                    clueId:{
                        clueId:0,
                        clueName:'',
                        clueSource:'',
                        cluePhone:'',
                        clueMobile:'',
                        clueSite:'',
                        clueEstablishtime:'',
                        clueRemark:'',
                        clueLinkmanname:'',
                        clueLinkmansj:'',
                        clueSz:'',
                    }
                },
                lxtxListser:{//联系提醒表2
                    relationwarnId:0,
                    relationwarnNr:'',
                    relationwarnLx:'',
                    relationwarnTime:'',
                    relationwarnZt:'0',
                    relationwarnJd:0,
                    empId:{//员工表
                        empId:0,
                        empName:''
                    },
                    clientId: {//客户表单
                        clientId: 0,
                        clientName: '',//公司名称
                        clientIndustry: '',//公司行业
                        clientSource: '',//客户来源
                        clientPhone: '',//客户电话
                        clientMobile: '',//客户手机
                        clientUrl: '',//客户网址
                        clientRank: '',//客户级别
                        clientSite: '',//客户地址
                        establishPerson: '',//下次联系时间
                        clientRemark: '',//客户备注
                    },
                    linkmanId: {//联系人
                        linkmanId: 0,
                        linkmanName: '',
                        linkmanMobile: '',
                        linkmanPosition: '',
                        linkmanPeople: '',
                    },
                    clueId:{
                        clueId:0,
                        clueName:'',
                        clueSource:'',
                        cluePhone:'',
                        clueMobile:'',
                        clueSite:'',
                        clueEstablishtime:'',
                        clueRemark:'',
                        clueLinkmanname:'',
                        clueLinkmansj:'',
                        clueSz:'',
                    }
                },
                lxtxListssan:{//联系提醒表2
                    relationwarnId:0,
                    relationwarnNr:'',
                    relationwarnLx:'',
                    relationwarnTime:'',
                    relationwarnZt:'0',
                    relationwarnJd:0,
                    empId:{//员工表
                        empId:0,
                        empName:''
                    },
                    clientId: {//客户表单
                        clientId: 0,
                        clientName: '',//公司名称
                        clientIndustry: '',//公司行业
                        clientSource: '',//客户来源
                        clientPhone: '',//客户电话
                        clientMobile: '',//客户手机
                        clientUrl: '',//客户网址
                        clientRank: '',//客户级别
                        clientSite: '',//客户地址
                        establishPerson: '',//下次联系时间
                        clientRemark: '',//客户备注
                    },
                    linkmanId: {//联系人
                        linkmanId: 0,
                        linkmanName: '',
                        linkmanMobile: '',
                        linkmanPosition: '',
                        linkmanPeople: '',
                    },
                    clueId:{
                        clueId:0,
                        clueName:'',
                        clueSource:'',
                        cluePhone:'',
                        clueMobile:'',
                        clueSite:'',
                        clueEstablishtime:'',
                        clueRemark:'',
                        clueLinkmanname:'',
                        clueLinkmansj:'',
                        clueSz:'',
                    }
                },
                linkmanlist:[],//联系人表单
                tailslist:[],//存放查询所有跟进记录
                sjlist:[],//商机表单
                htlists:[],//合同表单
                hkjhlists:[],//回款计划表单
            };
        },
        methods: {
            cxid(id,name){
                if(name=='交付计划'){
                    this.$axios.get("http://localhost:8088/khjfjh-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/jiaofu/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='合同'){
                    this.$axios.get("http://localhost:8088/hetongs-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/heton/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='订单'){
                    this.$axios.get("http://localhost:8088/dingdans-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/dindan/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='回款计划'){
                    this.$axios.get("http://localhost:8088/huikuan-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/hueikuan/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='退货'){
                    this.$axios.get("http://localhost:8088/tuihuo-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/tueihuo/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='换货'){
                    this.$axios.get("http://localhost:8088/huanhuo-list", {params:{id:id}})
                        .then(v=>{
                            window.console.log(v.data)
                            this.$router.push({
                                path:'/zhuye/huanhuo/xianqin',
                                query:{key:v.data[0]}
                            });
                        }).catch();
                }else if(name=='销售机会' || name=='竞争对手' || name=='报价'){
                    this.$router.push({
                        path:'/details',
                        query: {
                            row: escape(Crypto.set(id))}
                    });
                }
            },
            /*跳转新建联系人方法*/
            xjlxr(clientId){
                clientId = escape(clientId); // 加密数据
                this.$router.push({
                    path:'/xjlxr',
                    query: {
                        clientId:clientId
                    }
                });
            },
            wcff(row){
                window.console.log(row)
            },
            lxtxann(){//联系提醒按钮
                this.lxtxList.clientId = this.clientlist;
                this.lxtxList.empId = this.clientlist.empId;
                this.lxtxList.relationwarnTime = null;
                this.lxtxList.relationwarnLx = null;
                this.lxtxList.relationwarnNr = null;
                this.lxtxList.clientId.clientName = null;
                this.lxtxList.linkmanId = null;
                this.lxtxtankuan = true;
            },
            lxtxann2(row){
                window.console.log(row)
                this.lxtxList= row;
                this.xglxtxtankuan = true;
            },
            todetails(){
            },
            handleChange(val) {//联系提醒
                console.log(val);
            },
            addlxtx(){//新增联系提醒
                window.console.log("对象:"+this.lxtxList.linkmanId)
                this.$axios.post("http://localhost:8088/addlxtx-list",this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '新增成功!',
                        });
                        this.lxtxtankuan = false;
                        this.$router.push({
                            path: '/tfyxq'
                        });
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '新增失败',
                            type: 'error'
                        });
                    })
            },
            bjlxtxzt1(){//修改联系提醒的完成状态
                this.$axios.post("http://localhost:8088/xgztlxtx-list", this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已标记为完成!',
                        });
                        this.xglxtxtankuan = false;
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '失败',
                        type: 'error'
                    });
                })
            },
            bjwlxtxzt2(){//修改联系提醒的未完成状态
                this.$axios.post("http://localhost:8088/xgztwlxtx-list", this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已标记为未完成!',
                        });
                        this.xglxtxtankuan = false;
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '失败',
                        type: 'error'
                    });
                })
            },
            bjlxtxzt(row){//修改联系提醒的完成状态
                this.lxtxList = row;
                this.$axios.post("http://localhost:8088/xgztlxtx-list", this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已标记为完成!',
                        });
                        this.xglxtxtankuan = false;
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '失败',
                        type: 'error'
                    });
                })
            },
            bjwlxtxzt(row){//修改联系提醒的未完成状态
                this.lxtxList = row;
                this.$axios.post("http://localhost:8088/xgztwlxtx-list", this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已标记为未完成!',
                        });
                        this.xglxtxtankuan = false;
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '失败',
                        type: 'error'
                    });
                })
            },
            bjlxtx(){//修改联系提醒
                this.$axios.post("http://localhost:8088/addlxtx-list", this.lxtxList)
                    .then(() => {
                        this.initData();
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '修改成功!',
                        });
                        this.xglxtxtankuan = false;
                        this.$router.push({
                            path: '/tfyxq'
                        });
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error'
                    });
                })
            },
            sclxtx(row){//删除联系提醒
                this.lxtxList = row;
                this.$confirm('确认删除该提醒?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.$axios.post("http://localhost:8088/sclxtx-list", this.lxtxList)
                    .then(() => {
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!',
                        });
                        this.initData();
                    }).catch(() => {
                    this.$message({
                        showClose: true,
                        message: '删除失败',
                        type: 'error'
                    });
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            xgclient(clientId){//客户修改方法
                clientId = escape(Crypto.set(clientId));//加密数据
                this.$router.push({
                    path:'/xjkh',
                    query: {
                        clientId:clientId
                    }
                });
            },
            //客户查询方法
            initData(){
                var id = Crypto.get(unescape(this.$route.query.row));
                this.$axios.post("http://localhost:8088/clientid-list",this.qs.stringify(
                    {clientId:parseInt(id)})).then(v=>{
                    this.clientlist = v.data;
                    //表信息
                    this.cxqb(parseInt(id));//查询客户全部视图
                    this.khcx(parseInt(id));//查询客户基本信息
                    this.lxrcx(parseInt(id));//查询客户的联系人信息
                    this.sjcx(parseInt(id));//查询客户的商机信息
                    //this.czlist(parseInt(id));//查询操作记录
                    this.khlxrs(parseInt(id));//客户联系人查询
                    this.htlist(parseInt(id));//合同查询
                    this.htjxlist(parseInt(id));//回款计划
                    this.cxlxtx(parseInt(id));//客户id联系提醒查询
                    this.cxlxtx2(parseInt(id));//客户id已完成联系提醒查询
                    this.cxlxtx3(parseInt(id));//客户id已延期联系提醒查询
                }).catch();
            },
            cxqb(id){
                this.$axios.get("http://localhost:8088/allselect-list", {params:{clientId:parseInt(id)}})
                    .then(v=>{
                    this.selectall = v.data;
                }).catch();
            },
            cxlxtx(id){//根据客户id查询联系提醒
                this.$axios.post("http://localhost:8088/cxidlxtx-list",this.qs.stringify(
                    {clientId:parseInt(id)})).then(v=>{
                    this.lxtxLists = v.data;
                }).catch();
            },
            cxlxtx2(id){//根据客户id查询已完成联系提醒
                this.$axios.post("http://localhost:8088/wcidlxtx-list",this.qs.stringify(
                    {clientId:parseInt(id)})).then(v=>{
                    this.lxtxListser = v.data;
                }).catch();
            },
            cxlxtx3(id){//根据客户id查询已延期联系提醒
                this.$axios.post("http://localhost:8088/yqidlxtx-list",this.qs.stringify(
                    {clientId:parseInt(id)})).then(v=>{
                    this.lxtxListssan = v.data;
                }).catch();
            },
            //根据客户id查询合同
            htlist(id){
                this.$axios.post("http://localhost:8088/ht-list",this.qs.stringify(
                    {search:null,search2:parseInt(id)})).then(v=>{
                    this.htlists = v.data;
                }).catch();
            },
            //根据客户id查询回款计划
            htjxlist(id){
                this.$axios.post("http://localhost:8088/clienthkjh-list",this.qs.stringify(
                    {search:parseInt(id)})).then(v=>{
                    this.hkjhlists = v.data;
                }).catch();
            },
            //根据客户id查询操作记录
            // czlist(id){
            //     this.$axios.post("http://localhost:8088/findAllcz-list",this.qs.stringify(
            //         {clientId:parseInt(id)})).then(v=>{
            //         this.activities = v.data;
            //     }).catch();
            // },
            //客户id查询
            khcx(id){
                this.$axios.post("http://localhost:8088/clientid-list",this.qs.stringify(
                    {clientId:parseInt(id)})).then(v=>{
                    this.clientlist = v.data;
                }).catch();
            },
            //根据客户id查询-联系人
            lxrcx(id){
                this.$axios.post("http://localhost:8088/cxlinkman-list",this.qs.stringify(
                    {id:parseInt(id)})).then(v=>{
                    this.linkmanlist = v.data;
                }).catch();
            },
            //客户-联系人查询
            khlxrs(id){
                this.$axios.post("http://localhost:8088/cxlinkman-list",this.qs.stringify(
                    {id:parseInt(id)})).then(v=>{
                    this.khlxr = v.data;
                    window.console.log("查询："+this.khlxr)
                }).catch();
            },
            //根据客户id查询商机信息
            sjcx(){
                var id = Crypto.get(unescape(this.$route.query.row));
                this.$axios.post("http://localhost:8088/findclientsj-list",this.qs.stringify(
                    {clientId:parseInt(id)}))
                    .then(v=>{
                        this.sjlist = v.data;
                        this.print("商机信息:"+v.data);
                    }).catch(()=>{
                    });
            },
            gotoMenu(){
                this.$router.replace('/xjkh')
            },
            gotoMenufh(){
                this.$router.replace('/tfykh')
            },
            showjl(){
                this.jl=true;
            },
            gotoMenulxr(){
                this.$router.replace('/xjlxr')
            },
        },
        created: function () {//查询从列表页面传值初始化方法
            if(this.$route.query.row != null){
                this.initData();
                this.sjcx();
            }
        },
        computed:{
        },
        filters:{//日期格式化
            formatDate: function(time) {
                if(time != null && time != ""){
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                }else{
                    return "";
                }
            }
        }
    }
</script>

<style scoped>
    .empty-icon[data-v-009778d0] {
        display: block;
        width: 150px;
        margin: 0 auto 20px;
    }
    img {
         border-style: none;
     }
    .item {
        margin-top: 10px;
        margin-right: -50px;
    }
    *{
        margin:0;
        padding:0;
    }
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 4.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
    }
    .lx div:hover{
         background-color: aliceblue;
        cursor:pointer;
     }
    .lx2 div:hover{
        background-color: #CEEFC8;
        cursor:pointer;
    }
    .lx3 div:hover{
        background-color: #e6e6e6;
        cursor:pointer;
    }
    .divs{
        border:1px solid darkturquoise;
        border-radius: 4px;
        height:40px;
        width: 1095px;
        font-size: 16px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
    .divs1{
        border:1px solid #6BD089;
        border-radius: 4px;
        height:40px;
        width: 1095px;
        font-size: 16px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
    .divs2{
        border:1px solid #A0A0A0;
        border-radius: 4px;
        height:40px;
        width: 1040px;
        font-size: 16px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
    .ysclass{
        color: gray;
    }
</style>